<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>

	<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css" />
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

	<link rel="stylesheet" type="text/css" href="htmlCalendar.css" />
	<script type="text/javascript" src="htmlCalendar.js"></script>

	<!--
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
	<script type="text/javascript" src="callout.js"></script>
	-->

	<script>
		$(function() {

			var items1 = [
				{ name : "ccc", date : new Date(2011, 9, 30, 9, 0) }
				, { name : "aaa", date : new Date(2011, 10, 2, 10, 30) }
				, { name : "bbb", date : new Date(2011, 10, 4) }
				, { name : "same as bbb3", date : new Date(2011, 10, 4, 9, 21) }
				, { name : "same as bbb3", date : new Date(2011, 10, 4, 9, 3) }
				, { name : "same as bbb", date : new Date(2011, 10, 4, 11, 30) }
				, { name : "same as bbb2", date : new Date(2011, 10, 4, 9, 20) }
				, { name : "person 11/24 ", date : new Date(2011, 10, 24) }
				, { name : "person 11/30 ", date : new Date(2011, 10, 30, 10, 0) }
				, { name : "person 12/7 ", date : new Date(2011, 11, 7, 10, 0) }
				, { name : "person 1/7 ", date : new Date(2012, 0, 7, 10, 0) }
			];

			var items2 = [
				{ name : "chigau", date : new Date() }
				, { name : "chigau2", date : new Date(2011, 10, 2, 10, 30) }
			];

			var linkSetting = {
				link : {
					label : "Add Routine"
					, onClickFunctionName : "func1"
				}
			};
			$("#htmlCalendar1").htmlCalendar(linkSetting, items1);
			$("#htmlCalendar2").htmlCalendar(null, items2);
			var today = new Date();
			$("#htmlCalendar3").htmlCalendar({baseDate : new Date(today.getFullYear(), today.getMonth() + 1, 1)}, items1);
			$("#htmlCalendar4").htmlCalendar(null);
			$("#htmlCalendar5").htmlCalendar();

		});

		function func1(date){
			alert(date);
		}

	</script>

</head>
<body>

	<div id="htmlCalendar1"></div>
	<div id="htmlCalendar2"></div>
	<div id="htmlCalendar3"></div>
	<div id="htmlCalendar4"></div>
	<div id="htmlCalendar5"></div>

</body>
</html>


